<template>
  <div>
    <div>
      <div class="head">
        <!-- <img @click="lingqu" src="../../assets/img/saijuan.png" alt /> -->
        <div v-if="flag==1" class="guang">
          <img class="tu" src="../../assets/img/lqss.png" alt />
        </div>
        <div v-else-if="flag==0">
          <img class="tu" v-if="all==0" @click="lingqu" src="../../assets/img/saijuan.png" alt />
          <img class="tu" v-else-if="all==1" src="../../assets/img/ljin.png" alt />
        </div>
      </div>
      <div class="middle"></div>
      <div class="center">
        <div class="center-con">
         <img src="../../../src/assets/img/goback.png" alt="" class="goback" v-if="active == 0&&fix == true" @click="goback()">
          <ul class="list">
            <li class="nalist" v-for="(item,index) in list" :key="index" @click="diantu(index)">
              <img :src="item.imges" alt />
            </li>
            	
          </ul>
        </div>
      </div>
      <div class="endd"></div>
    </div>

    <!-- 登录弹窗 -->
    <div class="shoewr-chenhoupass">
      <div class="chen-contener chenpass">
        <p class="chen-title">提示</p>
        <p class="chen-text chen-textactive">您需要先登录?</p>
        <div class="chen-but">
          <p class="chen-but-no" @click="repeatclose()">取消</p>
          <p class="chen-but-yes chen-but-yesactive" @click="repeatclick()">去登录</p>
        </div>
      </div>
    </div>
    <!-- end -->

    <!-- 绑定微信 -->
    <div class="shoewr-chenhoupass1">
      <div class="chen-contener chenpass">
        <p class="chen-title">温馨提示</p>
        <p class="chen-text chen-textactive">您的账号没有绑定微信，不能使用微信支付</p>
        <div class="chen-but">
          <p class="chen-but-no" @click="repeatclose1()">取消</p>
          <p class="chen-but-yes" @click="repeatclick1()">去绑定</p>
        </div>
      </div>
    </div>
		<!-- 确定微信支付是否完成 -->
		<div class="wxpayshower">
			<div class="chen-free">
				<div class="chen-contener1 chenpass">
					<p class="chen-text chen-textactive">请确定微信支付是否已完成</p>
					<div class="finishpay" @click="finishclick()">已完成支付</div>
					<div class="finishpay1" @click="againclick()">支付遇到问题，重新支付</div>
				</div>
			</div>
		</div>
		
		
    <!-- 底部弹框 -->
    <mt-popup
      v-model="popupVisible"
      popup-transition="popup-fade"
      position="bottom"
      class="showerchoose"
    >
      <div @click="quxiaoclick()" ref="top"></div>
      <div class="paychoose" ref="bto">
        <div class="paychoosecenter">
          <div class="paychoosetop">
            <p class="paychoosetitle">支付方式</p>
            <p class="paychoosefalse" @click="quxiaoclick()">取消</p>
          </div>
          <div class="everypay everypay1" @click="choosepay(1)">
            <div class="everyleft">
              <div class="everypic">
                <img src="../../assets/img/saisii.png" alt />
              </div>
              <div class="everytitle">
                赛思币支付
                <span>({{user_money}})</span>
              </div>
              <!-- <div class="everytitle">小七币支付<span>({{coursearr.user_money}})</span></div> -->
            </div>
            <div class="everyright">
              <img v-if="chooseyu" src="../../assets/img/chooseactive.png" alt />
              <img v-else src="../../assets/img/choose.png" alt />
            </div>
          </div>
          <div class="everypay everypay2" @click="choosepay(2)">
            <div class="everyleft">
              <div class="everypic">
                <img src="../../assets/img/wxss.png" alt />
              </div>
              <div class="everytitle">微信支付</div>
            </div>
            <div class="everyright">
              <img v-if="choosewechat" src="../../assets/img/chooseactive.png" alt />
              <img v-else src="../../assets/img/choose.png" alt />
            </div>
          </div>
        </div>
        <div v-if="choosetype==1|| choosetype=='1'">
          <div
            class="choosepaybottom"
            v-if="Number(amount)>Number(user_money)"
            @click="czhi()"
          >小七币不足支付，点击充值</div>
          <div class="choosepaybottom" @click="payclick(2)" v-else>立即支付￥{{amount}}</div>
        </div>
        <div class="choosepaybottom" v-else @click="payclick(1)">立即支付￥{{amount}}</div>
      </div>
    </mt-popup>
  
     
    <!-- 支付成功-->
    	<div class="detailsuccess">
			<div class="detailcontent">
				<div class="successtop">
					<div class="successpic">
						<img src="../../../src/assets/img/paytansuccess.png" alt="">
					</div>
					<div class="success_order">
						<img src="../../../src/assets/img/paysuccesstext.png" alt="">
					</div>
				
					<div class="successbottom">
						<div class="successactive" @click="success()">支付成功</div>
					</div>
				</div>
			</div>
		</div>
    <!-- 支付成功-->
		<div class="detailsuccess1">
			<div class="detailcontent">
				<div class="successtop">
					<div class="successpic">
						<img src="../../../src/assets/img/failsu.png" alt="">
					</div>
					<div class="success_order">
						<img src="../../../src/assets/img/failtext.png" alt="">
					</div>
				
					<div class="successbottom">
						<div class="successactive1" @click="losser()"> 取消支付</div>
					</div>
				</div>
			</div>
		</div>
				
				 
  </div>
</template>
<script>
export default {
  data() {
    return {
      is_band_wechat: 0, //是否绑定微信  1绑定
      imgurl: this.$store.state.img,
      popupVisible: false,
      user_money: "",
      choosewechat: true,
      chooseyu: false,
      choosetype: 2,
      amount: "",
      url: this.$store.state.url,
      flag: "",
      all: "",
      sid: "",
      dingid: "",
      sn: "",
      timer: "",
      ishow1:false,
      active:0,
      fix:true,
      top:'',
      list: [
        {
          imges: require("../../assets/img/ss1.png")
        },
        {
          imges: require("../../assets/img/ss2.png")
        },
        {
          imges: require("../../assets/img/ss3.png")
        },
        {
          imges: require("../../assets/img/ss4.png")
        },
        {
          imges: require("../../assets/img/ss5.png")
        },
        {
          imges: require("../../assets/img/ss6.png")
        },
        {
          imges: require("../../assets/img/ss7.png")
        },
        {
          imges: require("../../assets/img/ss8.png")
        }
      ]
    };
  },
  methods: {
	  finishclick(){
		$('.wxpayshower').fadeOut();
		// this.$router.go(-1) 
		this.$router.push({
		   path:'/'
		})  
	  },
	  againclick(){
		 $('.wxpayshower').fadeOut(); 
	  },
    // 点击取消
    repeatclose() {
      $(".shoewr-chenhoupass").fadeOut();
     
    },
    gun(){
       var  scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      this.top = scrollTop;
    },
//Activity/unlock清除订单锁定
  clearunlock(){
   // console.log('111')
    let that=this
     that.axios({
          method: "GET",
          url:that.url+"Activity/unlock?id="+that.dingid     
        })
        .then(res => {  
         // console.log(res)
        });
  },
    // 点击去登录
    repeatclick() {
      $(".shoewr-chenhoupass").fadeOut();
      this.d();
    },
   goback(){
	  this.$router.push({
		path:'/'
	  })
	},
    //repeatclose
    repeatclose1() {
      $(".shoewr-chenhoupass1").fadeOut();
    },
		losser(){
			  this.clearunlock()
        $('.detailsuccess1').fadeOut();
		},
    repeatclick1() {
      var mainpath = this.$store.state;
      var url1 = this.$route.fullPath;
      var url2 = encodeURIComponent(url1);
      var urllogin = window.location.href.split(":")[0];
      window.localStorage.setItem("hrefurl", url2);
      var href =
        mainpath.url +
        "User/WechatLogin?to=" +
        urllogin +
        "&route=gd&fromsource=" +
        mainpath.fromsource +
        "";
      window.location.href = href;
    },
    //一元领取优惠券
    lingqu() {
      let that=this
      if (localStorage.getItem("token")) {
        that.xiadan();
        that.getuserInfo();
      } else {
        that.nologin();
      }
    },
    nologin() {
      $(".shoewr-chenhoupass").fadeIn();
    },
    quxiaoclick() {
      this.popupVisible = false;
     this.clearunlock()
    },
    // 点击选择支付方式
    choosepay(choosetype) {
      this.choosetype = choosetype;

      if (choosetype == 1 || choosetype == "1") {
        this.chooseyu = true;
        this.choosewechat = false;
      } else {
        this.chooseyu = false;
        this.choosewechat = true;
      }
    },
    czhi() {
      this.$router.push({
        path: "/zaixiancongzhi"
      });
    },
    payclick(type) {
      let that = this;
      if (this.dingid != undefined) {
        if (type == 2) {
          //赛思币支付
          that.ssmoney();
        } else if (type == 1) {
          //  console.log(this.dingid)
          //判断是否是微信浏览器
          var ua = navigator.userAgent.toLowerCase();
          var isWeixin = ua.indexOf("micromessenger") != -1;
          if (isWeixin) {
            if (that.is_band_wechat == 1 || that.is_band_wechat == "1") {
				that.couponPay(1);
     //          that.axios({
     //              method: "get",
     //              url:that.url +"Activity/couponPay",
				 //  params:{
				 //  	id:that.dingid,
					// payment:1,
				 //  }
     //            }).then(res => {
     //              if (res.data.errcode == 0 || res.data.errcode == "0") {
     //                var data = res.data.data;
     //                var data1 = {
     //                  appId: data.appId,
     //                  nonceStr: data.nonceStr,
     //                  package: data.package,
     //                  paySign: data.paySign,
     //                  signType: data.signType,
     //                  timeStamp: data.timeStamp
     //                };
     //                that.callpay(data1);
     //               // alert(data.appId)
     //              //  $(".shoewr-chenhoupass1").fadeIn();
     //                this.popupVisible = false;
     //              }
     //            });
            } else {
              $(".shoewr-chenhoupass1").fadeIn();
            }
          } else {
			  that.couponPay(4);
            // $(".shoewr-chenhoupass1").fadeIn();
            // layer.open({
            //   content: "请在微信中支付",
            //   skin: "msg",
            //   time: 2 //1秒后自动关闭
            // });
          }
        }
      }
    },
	couponPay(type){
		var that = this;
		that.axios({
		    method: "get",
		    url:that.url +"Activity/couponPay",
		  params:{
			id:that.dingid,
			payment:type,
		  }
		  }).then(res => {
		    if (res.data.errcode == 0 || res.data.errcode == "0") {
		      var data = res.data.data;
			    if(type==1||type=='1'){
				  var data1 = {
					appId: data.appId,
					nonceStr: data.nonceStr,
					package: data.package,
					paySign: data.paySign,
					signType: data.signType,
					timeStamp: data.timeStamp
				  };
				  that.callpay(data1);
				 // alert(data.appId)
				//  $(".shoewr-chenhoupass1").fadeIn();
				  this.popupVisible = false;
			    }else if(type==4||type=='4'){
					var urlred = window.location.href+'?typepay=1'
					var url = data+'&redirect_url='+encodeURIComponent(urlred)+'';
					// console.log(url)
					window.location.href=url; 
				}
		    }
		  });
	},
    success(){
       this. getcoupon() 
        $('.detailsuccess').fadeOut()
    },
    //Activity/buyCoupon优惠券下单
    xiadan() {
     // console.log(this.sid);
      let that = this;
      that
        .axios({
          method: "GET",
          url: that.url + "Activity/buyCoupon?id=" + that.sid
        })
        .then(res => {
          if(res.data.errcode==0||res.data.errcode=='0'){
              that.dingid = res.data.data.id;
              that.sn = res.data.data.sn;
              that.payclick();
               this.popupVisible = true;
          }else {
               layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 2 //1秒后自动关闭
            });
            this.popupVisible = false
          }
        
        });
    },
    callpay(data) {
      if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
          document.addEventListener(
            "WeixinJSBridgeReady",
            this.jsApiCall,
            false
          );
        } else if (document.attachEvent) {
          document.attachEvent("WeixinJSBridgeReady", this.jsApiCall);
          document.attachEvent("onWeixinJSBridgeReady", this.jsApiCall);
        }
      } else {
        var that = this;
        that.jsApiCall(data);
      }
    },
    jsApiCall(data) {
      WeixinJSBridge.invoke("getBrandWCPayRequest", data, function(res) {
        if (res.err_msg == "get_brand_wcpay_request:ok") {
           
           $('.detailsuccess').fadeIn()
        } else {
			$('.detailsuccess1').fadeIn()
						
        }
      });
    },
    // setTime() {
    //   var that = this;
    //   //	var thatstate = that.$store.state;
    //   that.timer = setInterval(function() {
    //     // console.log(888)
    //     that
    //       .axios({
    //         method: "get",
    //         url:that.url+"Activity/find?sn="+that.sn
    //       })
    //       .then(res => {
    //         if (res.data.errcode == "0" || res.data.errcode == 0) {
    //           that.popupVisible = false;
    //           that.getuserInfo();
    //           clearInterval(that.timer);
    //         }
    //       });
    //   }, 1000);
    // },

    //赛思币支付Activity/couponPay
    ssmoney() {
      let that = this;
      that
        .axios({
          method: "GET",
          url: that.url + "Activity/couponPay?id=" + that.dingid + "&payment=2"
          
        })
        .then(res => {
          //  console.log(res.data)
          if (res.data.errcode == 0) {
            this.popupVisible = false;
            that.getuserInfo();
            that.getcoupon();
          }
        });
    },
    // 获取个人信息
    getuserInfo: function() {
      var that = this;
      that
        .axios({
          method: "GET",
          url: that.url + "User/getUserInfo"
        })
        .then(res => {
          //  console.log(res.data.data.money)
          that.user_money = res.data.data.money;
          that.is_band_wechat = res.data.data.is_band_wechat;
        })
        .catch(err => {});
    },
    //获取优惠券Activity/coupon
    getcoupon() {
      var that = this;
      that
        .axios({
          method: "GET",
          url: that.url + "Activity/coupon"
        })
        .then(res => {
          // console.log(res.data.data[0])
          that.flag = res.data.data[0].flag;
          that.all = res.data.data[0].all;
          that.amount = res.data.data[0].pay_amount;
          that.sid = res.data.data[0].id;
          // that.xiadan()
        })
        .catch(err => {});
    },

    diantu(index) {
      if (index == 0) {
        window.location.href = "http://www.ssykb.cn/class?bid=47";
      } else if (index == 1) {
        window.location.href = "http://www.ssykb.cn/class?bid=46";
      } else if (index == 2) {
        window.location.href = "http://www.ssykb.cn/class?bid=44";
      } else if (index == 3) {
        window.location.href = "http://www.ssykb.cn/specialtopic?stid=42";
      } else if (index == 4) {
        window.location.href = "http://www.ssykb.cn/specialtopic?stid=47";
      } else if (index == 5) {
        window.location.href = "http://www.ssykb.cn/specialtopic?stid=48";
      } else if (index == 6) {
        window.location.href = "http://www.ssykb.cn/specialtopic?stid=46";
      } else if (index == 7) {
        window.location.href = "http://www.ssykb.cn/course?cid=360";
      }
    },

     
  },
  mounted() {
    let that=this;
	
	if(this.$route.query.typepay){
		var typepay = this.$route.query.typepay;
		if(typepay==1||typepay=='1'){
			$('.wxpayshower').fadeIn();
		}
	}
	
    this.getuserInfo();
    this.getcoupon();
     window.addEventListener('scroll', that.gun)
  },
       watch:{
          top(newName, oldName){
            if (newName > oldName){
              this.fix = false;
            } else {
              this.fix = true;
            }
          },
//           $route(to,from){
//          // console.log(to.path);
//           }
      }
};
</script>
<style scoped>
.head {
  width: 7.5rem;
  height: 7.44rem;
  background-image: url(../../assets/img/saitop.png);
  background-size: 100% 100%;
  overflow: hidden;
}
.middle {
  width: 7.5rem;
  height: 4.04rem;
  background-image: url(../../assets/img/saimin.png);
  background-size: 100% 100%;
}
.center {
  width: 7.5rem;
  height: 11.92rem;
  background-image: url(../../assets/img/saicen.png);
  background-size: 100% 100%;
  overflow: hidden;
}
.endd {
  width: 7.5rem;
  height: 14.85rem;
  background-image: url(../../assets/img/saiend.png);
  background-size: 100% 100%;
}
.tu {
  width: 3.29rem;
  height: 0.99rem;
  display: block;
  margin: 0 auto;
  margin-top: 6.26rem;
  cursor: pointer;
}
.nalist {
  width: 3.07rem;
  height: 2.55rem;
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
}
.nalist > img {
  width: 3.07rem;
  height: 2.55rem;
  display: block;
  cursor: pointer;
}
.list {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 1.07rem;
}
.center-con {
  width: 7rem;
  margin: 0 auto;
}
.shoewr-chenhoupass1 {
  display: none;
}
.showerchoose {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  z-index: 1;
}
.paychoose {
  position: absolute;
  z-index: 2;
  width: 100%;
  border-top-right-radius: 0.08rem;
  border-top-left-radius: 0.08rem;
  bottom: 0;
  background: #fff;
}
.paychoosecenter {
  width: 6.9rem;
  margin: auto;
}
.paychoosecenter .everypay1 {
  margin: 0.58rem auto 0;
  padding-bottom: 0.28rem;
  border-bottom: 1px solid #ededed;
}
.paychoosecenter .everypay2 {
  margin: 0.29rem auto 1.09rem;
}
.paychoosetop {
  display: flex;
  justify-content: space-between;
}
.paychoosetitle {
  color: #333333;
  font-size: 0.3rem;
  padding-top: 0.4rem;
}
.paychoosefalse {
  color: #999999;
  font-size: 0.24rem;
  padding-top: 0.54rem;
}
.everypay {
  width: 6.9rem;
  height: 0.9rem;
  margin: auto;
  line-height: 0.9rem;
  font-size: 0.3rem;
  display: flex;
  justify-content: space-between;
}
.everyleft {
  display: flex;
  justify-content: flex-start;
}
.everypic {
  width: 0.32rem;
  height: 0.32rem;
}
.everypic img {
  width: 100%;
  height: 100%;
  vertical-align: middle !important;
}
.everytitle {
  margin-left: 0.32rem;
}
.everyright {
  width: 0.3rem;
  height: 0.3rem;
}
.everyright img {
  width: 100%;
  height: 100%;
  vertical-align: middle !important;
}
.everytitle {
  color: #333;
  margin-left: 0.32rem;
}
.everytitle span {
  color: #ff0214 !important;
  display: inline-block;
}
.active {
  color: #0287ff !important;
}
.choosepaybottom {
  width: 100%;
  line-height: 0.88rem;
  background: #0287ff;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 0.36rem;
}
/* 支付成功 */
  .successtop{
  	width: 100%;
  	height: 5.65rem;
  	position: relative;
  }
  .successpic{
  	width: 100%;
  	height: 5.65rem;
  	position:absolute;
  }
  .successpic img{
  	width: 100%;
  	height: 100%;
  }
   .success_order{
  	position: absolute;
	width: 3.45rem;
	height: 1.6rem;
	top: .73rem;
	left: 50%;
	margin-left: -1.725rem;
  	/* bottom: .76rem; */
  }
  .detailfail .success_order{
	  width: 4.18rem;
	  margin-left: -2.09rem;
  }
   .success_order img{
	  width: 100%;
	  height: 100%;
  }
  .success_ordertext{
	  width: 100%;
	  position: absolute;
	 color: #FFFFFF;
	 font-size: .24rem;
	 top: 2.7rem;
  }
  .success_ordertext p{
	 text-align: center;
  }
  
  .successbottom{
	position: absolute;
	bottom: .77rem;
	width: 100%;
  }
  .successbottom div{
  	width: 2.6rem;
  	height: .7rem;
  	text-align: center;
  	line-height: .7rem;
  	color: #0287FF;
  	border: 1px solid #0287FF;
  	font-size: .28rem;
  	border-radius: .35rem;
	margin: auto;
  }
  .successactiveback{
	  color: #999999 !important;
	  border: 1px solid #999999 !important;
  }
.detailsuccess1{
     position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    background: rgba(0,0,0,.3);
    z-index: 9999999999;
    display: none;
    left: 0;
}
  .goback{
    width: 1.2rem;
    height: 1.2rem;
    position: fixed;
    right: 0.2rem;
    bottom: 1.5rem;
  }


</style>
